<style lang="scss" scoped>
header {
  height: 2.2rem;
  background: #fff url(../../image/my_money.png) center center / cover;
  .money {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 100%;
    background: #fff url(../../image/my_moneys.png) center center / cover;
    div {
      color: #fd8a03;
    }
  }
  .btn {
    right: 0;
    top: 45%;
    width: 0.65rem;
    height: 0.3rem;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
  }
}
main {
  .tit {
    height: 0.5rem;
  }
  li {
    height: 0.5rem;
    line-height: 0.5rem;
    div {
      padding-left: 0.1rem;
    }
  }
}
footer {
  padding-top: 0.4rem;
}
</style>

<template>
  <div class="my_money">
    <header class="box-center position-r">
      <div class="money box-center bgfff">
        <p class="c82 font-10">{{titName}}(元)</p>
        <div class="font-22 cred padding-t10" v-show="!parseInt(hasUser)">{{userMoney.allmoney}}</div>
        <div class="font-22 cred padding-t10" v-show="parseInt(hasUser)">{{groupMoney.allmoney}}</div>
      </div>
      <div class="btn bgfff position-a box-center" @click="toRouter('money_list')">明细</div>
    </header>
    <main class="bgfff">
      <div class="tit flex-col border-b">
        <div class="box1 box-center" :class="{cred: !parseInt(hasUser)}" @click="hasUser = '0'">个人佣金</div>
        <div class="box1 box-center" :class="{cred: parseInt(hasUser)}" @click="hasUser = '1'">团队佣金</div>
      </div>
      <ul class="padding-lr15" v-show="!parseInt(hasUser)">
        <li class="flex-col border-b">
          <i class="iconfont icon-wodefenxiaoshang"></i>
          <div class="box1">应结佣金总金额</div>
          <span class="c82">{{userMoney.allmoney}}</span>
        </li>
        <li class="flex-col border-b">
          <i class="iconfont icon-qian4"></i>
          <div class="box1">本月结佣金额</div>
          <span class="c82">{{userMoney.monthmoney}}</span>
        </li>
        <li class="flex-col border-b">
          <i class="iconfont icon-jijin"></i>
          <div class="box1">待结佣金额</div>
          <span class="c82">{{userMoney.waitgetmoney}}</span>
        </li>
        <li class="flex-col border-b">
          <i class="iconfont icon-shuifeichaxun"></i>
          <div class="box1">扣减税费</div>
          <span class="c82">{{userMoney.taxmoney}}</span>
        </li>
        <li class="flex-col border-b">
          <i class="iconfont icon-tixian"></i>
          <div class="box1">可提现金额</div>
          <span class="c82">{{userMoney.cangetmoney}}</span>
        </li>
      </ul>
      <ul class="padding-lr15" v-show="parseInt(hasUser)">
        <li class="flex-col border-b">
          <i class="iconfont icon-wodefenxiaoshang"></i>
          <div class="box1">应结佣金总金额</div>
          <span class="c82">{{groupMoney.allmoney}}</span>
        </li>
        <li class="flex-col border-b">
          <i class="iconfont icon-qian4"></i>
          <div class="box1">本月结佣金额</div>
          <span class="c82">{{groupMoney.monthmoney}}</span>
        </li>
        <li class="flex-col border-b">
          <i class="iconfont icon-jijin"></i>
          <div class="box1">待结佣金额</div>
          <span class="c82">{{groupMoney.waitgetmoney}}</span>
        </li>
        <li class="flex-col border-b">
          <i class="iconfont icon-shuifeichaxun"></i>
          <div class="box1">扣减税费</div>
          <span class="c82">{{groupMoney.taxmoney}}</span>
        </li>
        <li class="flex-col border-b">
          <i class="iconfont icon-tixian"></i>
          <div class="box1">可提现金额</div>
          <span class="c82">{{groupMoney.cangetmoney}}</span>
        </li>
      </ul>

    </main>
    <footer class="box-center footer font-16 box-center">
      <div class="cfff box-center" @click="toRouter('get_money',{money:userMoney.cangetmoney})">提现</div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "my_money",
  data() {
    return {
      titName: "我的佣金",
      userMoney: {},
      groupMoney: {},
      hasUser: "0"
    };
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      that.getMoney();
    });
  },
  watch: {
    hasUser(val) {
      this.titName = parseInt(val) ? "团队佣金" : "我的佣金";
      if (!Object.keys(this.groupMoney).length) {
        this.getMoney();
      }
    }
  },
  methods: {
    cutNav(str) {
      this.hasUser = str;
    },
    //个人佣金
    getMoney() {
      let that = this,
        _url = {
          "0": "commission/info", // 个人
          "1": "commission/teamInfo" // 团队
        };
      this.http.post(_url[that.hasUser]).then(res => {
        parseInt(that.hasUser)
          ? (that.groupMoney = res.data)
          : (that.userMoney = res.data);
      });
    }
  }
};
</script>


